<template>
  <div class="container">
    <!-- 数据筛选 -->
    <div class="filter-container">
      <el-form :model="filterForm" label-width="80px">
        <el-form-item label="承运商编号：">
          <el-input v-model="filterForm.code" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="承运商名称：">
          <el-input v-model="filterForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据列表 -->
    <div class="table-container">
      <div class="table-actions">
        <el-button type="primary" icon="el-icon-plus" @click="handleConfirm1()"
          >新增</el-button
        >
        <el-button icon="el-icon-edit">编辑</el-button>
        <el-button icon="el-icon-delete">删除</el-button>
        <el-button icon="el-icon-refresh">刷新</el-button>
        <el-button icon="el-icon-upload2">导出</el-button>
      </div>
      <el-dialog title="新增承运商" :visible="dialogVisible" width="400px">
        <el-form :model="formData" label-width="120px">
          <el-form-item label="承运商编号：">
            <el-input
              placeholder="可不填写，自动生成"
              v-model="formData.code"
              disabled
            />
          </el-form-item>

          <el-form-item label="承运商名称：">
            <el-input v-model="formData.name" placeholder="全部" />
          </el-form-item>

          <el-form-item label="备注：">
            <el-input type="textarea" v-model="formData.remark" :rows="3" />
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button type="text" @click="dialogVisible = false"
              >取消</el-button
            >
            <el-button type="primary" @click="handleConfirm()">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="承运商编号" width="120" />
        <el-table-column prop="name" label="承运商名称" width="120" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-link type="primary" @click="handleEdit(row)">编辑</el-link>
            <el-link type="danger" @click="handleDelete(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部操作 -->
      <div class="table-footer">
        <el-checkbox v-model="selectAll">全选</el-checkbox>
        <el-checkbox v-model="reverseSelect">反选</el-checkbox>
        <el-button>批量操作</el-button>
        <el-pagination
          @current-change="handlePageChange"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          layout="prev, pager, next, jumper, ->, sizes"
          :page-sizes="[10, 20, 50]"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

// 筛选表单
const filterForm = reactive({
  code: "",
  name: "",
});

// 表格数据
const tableData = ref([
  { code: "00049", name: "顺丰快送", remark: "顺丰快送" },
  { code: "00048", name: "申通快送", remark: "申通快送" },
  // 测试数据
  ...Array(20)
    .fill()
    .map(() => ({
      code: "00047",
      name: "中通快送",
      remark: "中通快送",
    })),
]);
const dialogVisible1 = ref(true); // 对话框显示状态
const formData1 = ref({
  code: "自动生成编号", // 测试数据
  name: "全部", // 测试数据
  remark: "",
});
// 确定按钮处理
const handleConfirm1 = () => {
  console.log("提交数据：", formData1.value);
  dialogVisible1.value = false;
};
// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(tableData.value.length);

// 全选/反选
const selectAll = ref(false);
const reverseSelect = ref(false);

// 查询方法
const handleFilter = () => {
  console.log("筛选条件：", filterForm);
  // 实际请求接口逻辑
};

// 重置方法
const handleReset = () => {
  filterForm.code = "";
  filterForm.name = "";
  handleFilter();
};

// 分页切换
const handlePageChange = (page) => {
  currentPage.value = page;
  console.log("当前页码：", page);
};

// 编辑/删除模拟方法
const handleEdit = (row) => {
  console.log("编辑数据：", row);
};

const handleDelete = (row) => {
  console.log("删除数据：", row);
};
</script>

<style scoped>
.container {
  padding: 16px;
}

.filter-container {
  margin-bottom: 16px;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.table-actions {
  padding: 12px;
  margin-bottom: 8px;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f5f7fa;
}
</style>